import HomeCard from '@/components/HomeCard'
import { useCharts } from '@/hooks/useCharts'
import { useModel } from '@umijs/max'
import React, { useEffect } from 'react'

const RentLine = ({ dateTypeObj }) => {
  const { GetRentCurve } = useModel('DataCenter')
  const [rentLineRef, rentLineChart, rentLineLoading, setRentLineLoading] = useCharts() // 租金走势折线图

  useEffect(() => {
    if (rentLineChart) getRentTrendData()
  }, [rentLineChart])

  const getRentTrendData = async (dateType = '近一周') => {
    rentLineChart?.clear()
    setRentLineLoading(true)
    let params = {
      dateType: dateTypeObj[dateType].type
    }

    const res = await GetRentCurve(params)
    let baseSeries = {
      type: 'line',
      smooth: true,
      showSymbol: false,
      itemStyle: {
        borderRadius: 5
      },
      lineStyle: {
        type: 'dashed'
      },
      stack: '当日已收租金'
    }
    let endValue = dateTypeObj[dateType].endValue
    let series = [
      {
        name: '当日已收租金',
        field: 'today_received_amount',
        data: [],
        ...baseSeries
      },
      {
        name: '逾期总额',
        field: 'overdue_total_amount',
        data: [],
        ...baseSeries
      },
      {
        name: '当日待收租金',
        field: 'today_wait_amount',
        data: [],
        ...baseSeries
      }
    ]
    let xAxisData = []

    if (res) {
      res.forEach(item => {
        xAxisData.push(item.date_string)
        series[0].data.push(item.today_received_amount) // 当日已收租金
        series[1].data.push(item.overdue_total_amount) // 逾期总额
        series[2].data.push(item.today_wait_amount) // 当日待收租金
      })
      let option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#1E1B39',
          borderRadius: 10,
          borderColor: '#1E1B39',
          color: '#fff',
          textStyle: {
            fontFamily: 'DINPro-Medium',
            color: '#fff'
          }
        },
        dataZoom: {
          type: 'slider',
          realtime: true,
          startValue: 0, // 重点
          endValue,
          xAxisIndex: [0],
          bottom: '10',
          left: '30',
          right: '30',
          height: 10,
          borderColor: 'rgba(0,0,0,0)'
        },
        xAxis: [
          {
            // boundaryGap: false,
            type: 'category',
            data: xAxisData,
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              fontFamily: 'DINPro-Medium',
              interval: 0,
              rotate: 40,
              fontSize: 9
            }
          }
        ],
        color: ['#962DFF', '#FF718B', '#93AAFD'],
        toolbox: {
          show: true,
          top: '10px',
          right: '50px',
          feature: {
            mark: { show: true },
            magicType: {
              show: true,
              type: ['line', 'bar', 'stack', 'tiled'],
              option: {
                line: {
                  stack: '已收租金'
                },
                bar: {
                  stack: false
                }
              }
            }
          }
        },
        legend: {
          top: '10px',
          left: '50px',
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 40,
          icon: 'circle',
          data: series.map(item => item.name)
        },
        grid: {
          left: '4%',
          right: '4%'
        },
        yAxis: {
          type: 'value',
          splitNumber: 4,
          axisLabel: {
            fontFamily: 'DINPro-Medium'
          },
          splitLine: {
            lineStyle: {
              type: 'line',
              color: '#DDD'
            }
          },
          axisLine: {
            show: false
          },
          nameTextStyle: {
            color: '#999'
          },
          splitArea: {
            show: false
          }
        },
        series
      }
      rentLineChart?.setOption(option)
      setRentLineLoading(false)
    }
  }

  return (
    <>
      <HomeCard
        width={'100%'}
        height={'500px'}
        margin={[0, 0, 20, 0]}
        leftContent={{
          subTitle: '租金走势图'
        }}
        loading={rentLineLoading}
        isTab
        tabClick={item => getRentTrendData(item)}
      >
        <div ref={rentLineRef} className='chart_box' />
      </HomeCard>
    </>
  )
}
export default RentLine
